<template>
    <div >
     <div class="banner" @click="handleBannerClick">
         <img :src="bannerImg" alt="">

         <div class="banner-info">
           <div class="banner-title">{{sightName}}</div>
           <div class="banner-number"><span class="iconfont">&#xe637;</span>{{this.galleryImgs.length}}</div>
         </div>
     </div>
       <fade-animate>
         <detail-gallery :imgs="galleryImgs" v-show="showgallery" @close="handleCloseGallery"></detail-gallery>
       </fade-animate>
    </div>
</template>

<script>
  //import DetailGallery from '../../../common/gallery/Gallery'
  import DetailGallery from 'common/gallery/Gallery.vue'
  import FadeAnimate from 'common/fade/FadeAnimate.vue'
  //用别名引用后需要重启 npm run Dev 才能webpack.base.config.js修改生效
    export default {
        name: "Banner",
        data(){
          return{
            imgs:[],
            showgallery:false,


          }
        },
        props:{
          sightName:String,
          bannerImg:String,//传框接详细
          galleryImgs:Array//接受值props要写明值类型，Array，String，Object
        },
        methods:{
          handleBannerClick(){
            this.showgallery=true
          },
          handleCloseGallery(){
            this.showgallery=false
          }
        },
        components:{
          DetailGallery:DetailGallery,
          FadeAnimate:FadeAnimate
        }
    }
</script>

<style lang="stylus" scoped>
   .banner
     position:relative
     height:0
     padding-bottom: 55%
     overflow:hidden
     img
       width:100%
     .banner-info
        position:absolute
        left:0
        right:0
        bottom:0
        display:flex
        color:#fff
        background:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
        .banner-title
          flex:1
          height:0.6rem
          lineheight:0.6rem
          font-size:0.32rem
        .banner-number

           height: .32rem
           line-height:.32rem
           margin-top:0.14rem
           text-align:center
           padding:0 0.4rem
           font-size: 0.24rem
           background:rgba(0,0,0,0.8)
           border-radius:0.1rem

</style>
